import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom' 
import AvatarUpload from '../../components/AvatarUpload'
import './index.css'
import { useRef, useEffect} from 'react'
import * as echarts from 'echarts'
import axios from 'axios'
import {Avatar,Button,Modal} from 'antd-mobile'
import { removeToken, request } from '../../utils'
function Me () {

    const eref = useRef(null)
    const [avatar, setAvatar] = useState('')
    const [name, setName] = useState('')
    const [mobile, setMobile] =  useState('')
    const navigate = useNavigate()
    const getMe = () => {
        request.get('api/auth/me')
        .then(res => {
          setName(res.name)
          setMobile(res.mobile)
          setAvatar(res.avatar)
        })
    }
    
    useEffect(() => {
        getMe()
        // const myChart = echarts.init(eref.current)
        // myChart.setOption({
        //     color: ['rgb(255, 144, 70)'],
        //     tooltip: {},
        //     xAxis: {
        //       data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        //     },
        //     yAxis: {},
        //     series: [
        //       {
        //         name: '销量',
        //         type: 'bar',
        //         data: [5, 20, 36, 10, 10, 20]
        //       }
        //     ]
        //   })
        
    },[])

    
  return (
    <div>
        <div className='title'>
          <div className='me'>
            <Avatar src={avatar || ''} 
              style={{ 
                '--size': '64px',
                '--border-radius': '50%',
                position: 'relative', // 确保层级
                zIndex: 1000,         // 防止被覆盖
                pointerEvents: 'auto' // 显式启用交互
              }}
              onTouchEnd={() => console.log('touch')}
              onClick={() => {
                console.log('click')
                Modal.show({
                  content: <AvatarUpload />,
                  closeOnMaskClick: true,
                })
              }}
            />
            <div><div>{name}</div>{mobile}</div>
          </div>
          <span className='logout' onClick={() => {
            removeToken()
            navigate('/login')
          }}>退出</span>
        </div>
        <div>
          <Button>设置预算</Button>
        </div>
        {/* <div className='content' ref={eref}
            style={{ 
                width: '100%', 
                height: '300px',
              }}
        >
        </div> */}
    </div>
    
    
  )
}

export default Me